<template>
	<view class="">
		<view class="infoView">

			<view class="item flex-row-space-between">
				<view class="left">

					<text class="red">*</text>
					上班开始打卡时间-上班时间
				</view>
				<view @click="showPicker2=true" class="right flex-row-flex-end">
					{{values2}}
					<uni-icons type="right" color="#B7B7B7" size="20"></uni-icons>
				</view>
			</view>
			<view class="item flex-row-space-between">
				<view class="left">

					<text class="red">*</text>
					下班时间-下班截止打卡时间
				</view>
				<view @click="showPicker3=true" class="right flex-row-flex-end">
					{{values3}}
					<uni-icons type="right" color="#B7B7B7" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<hbxw-time-range-picker :value="values2" :visible="showPicker2" :isShowType="false" delimiter="point"
			:isShowSecond="false" @change="pickerChange2" @cancel="pickerCancel2" @sure="pickerSure2" />
		<hbxw-time-range-picker :value="values3" :visible="showPicker3" :isShowType="false" delimiter="point"
			:isShowSecond="false" @change="pickerChange23" @cancel="pickerCancel3" @sure="pickerSure3" />
			
			<view class="fixed-bottom ">
				<view @click="signTimeSet()" class="bottomButton">
					确定
				</view>
			</view>
	</view>
</template>

<script>
	import {
		signTimeInfo,
		signTimeSet
	} from '@/api/index.js'
	export default {
		data() {
			return {
				timeInfo: {},
				showPicker2: false,

				values2: '00:00-00:00',

				showPicker3: false,

				values3: '00:00-00:00',
			}
		},
		onLoad() {
			this.signTimeInfo()
		},
		methods: {
			signTimeSet(){
				var data = {
				
				}
				signTimeSet(this.timeInfo).then(res => {
					this.showToast(res.msg)
					this.signTimeInfo()
				})
			},
			signTimeInfo() {
				var data = {

				}
				signTimeInfo(data).then(res => {
					this.timeInfo = res.data
					this.values2 = this.timeInfo.work_start_time_range1 + "-" + this.timeInfo
						.work_start_time_range2
					this.values3 = this.timeInfo.work_end_time_range1 + "-" + this.timeInfo.work_end_time_range2
				})
			},
			pickerCancel2() {

			},
			pickerSure2(result) {
				console.log('---- pickerSure2 ----:', result);
				var list = result.valuesStr1.split("-")
				var e = {
					start_time: list[0],
					end_time: list[1],
				}
				this.timeInfo.work_start_time_range1=e.start_time
				this.timeInfo.work_start_time_range2=e.end_time
				this.values2 = this.timeInfo.work_start_time_range1 + "-" + this.timeInfo
					.work_start_time_range2
				this.values3 = this.timeInfo.work_end_time_range1 + "-" + this.timeInfo.work_end_time_range2
				this.showPicker2=false

			},
			pickerChange2(result) {

			},
			pickerCancel3() {
			
			},
			pickerSure3(result) {
				console.log('---- pickerSure2 ----:', result);
				var list = result.valuesStr1.split("-")
				var e = {
					start_time: list[0],
					end_time: list[1],
				}
				this.timeInfo.work_end_time_range1=e.start_time
				this.timeInfo.work_end_time_range2=e.end_time
				this.values2 = this.timeInfo.work_start_time_range1 + "-" + this.timeInfo
					.work_start_time_range2
				this.values3 = this.timeInfo.work_end_time_range1 + "-" + this.timeInfo.work_end_time_range2
				this.showPicker3=false
			},
			pickerChange3(result) {
			
			},
		}
	}
</script>

<style>
	.infoView {
		padding: 10rpx 0;
		margin: 30rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
	}

	.item {
		padding: 0 30rpx;
		height: 96rpx;
	}

	.columnLine1 {
		margin-right: 20rpx;
		width: 8rpx;
		height: 24rpx;
		background: #157EFE;
	}

	.title {
		font-weight: bold;
		font-size: 32rpx;
		color: #333333;
	}

	.left {

		font-weight: 500;
		font-size: 30rpx;
		color: #333333;
	}

	.red {
		color: #FF4536;
	}

	.right {
		text-align: right;
		font-weight: 500;
		font-size: 30rpx;
		color: #BBBBBB;
	}
</style>